﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>防百度搜索提示框</title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<script type="text/javascript" src="js/vue-resource.js"></script>
	<style type="text/css">
		.gray{background:#cdf3fb;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var a = new Vue({
					el:"#box",
					data:{
						mydata:[],
						txt:"",
						ind:0
					},
					methods:{
						get:function(ev){
							if(ev.keyCode == 38 || ev.keyCode == 40) return;  //是上下键的时候，不需要请求
							if(ev.keyCode == 13){  //输完直接点回车
								window.open("https://www.baidu.com/s?wd=" + this.txt);
							}
							this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
							{
								params:{
									wd:"a"
								},
								jsonp:"cb"
							}).then(function(res){
								this.mydata = res.data.s
							},function(){
								
							});
						},
						changeUp:function(){
							this.ind--;
							console.log(this.ind);
							if(this.ind == -1){
								this.ind = this.mydata.length-1;
							}
							this.txt = this.mydata[this.ind];  //使文本框里面的随选择变化
						},
						changeDown:function(){
							this.ind++;
							if(this.ind == this.mydata.length){
								this.ind = 0;
							}
							this.txt = this.mydata[this.ind];
						}
					}
			});
		}
	</script>
</head>
<body>
	<div id="box">
		<input type=""  v-model="txt" @keyup="get($event)" @keydown.up.prevent="changeUp()" @keydown.down="changeDown()"/>
		<ul>
			<li v-for="(val, index) in mydata" :class="{gray:index == ind}">{{val}}</li>
		</ul>
		<p v-show="mydata.length == 0">暂无数据。。。。</p>
	</div>
</body>
</html>